<!--52单个喷孔流量计算-->
<template>
  <div
      class="sum"
      style="width: 100%;height: 100%;overflow-x:auto;overflow-y:auto"
  >

    <div class="input">
      <div class="label_text">
        <label>
          输入参数
        </label>
      </div>
      <div class="input_left">
        <div class="text_left">
          <ul style="line-height:50px;">
            <li class="table_line">喷口直径d(mm)</li>
            <li class="table_line">喷孔长度L(mm)</li>
            <li class="table_line">润滑油压力(MPa)</li>
            <li class="table_line">润滑油密度(kg/m³)</li>
          </ul>
        </div>
        <div class="text_left_input">
          <ul class="text_input" style="line-height:50px; margin-left: 44px;">
            <li class="table_line">
              <a-input style="width: 60%" v-model="params_52.d" />
            </li>
            <li class="table_line">
              <a-input style="width: 60%" v-model="params_52.L" />
            </li>
            <li class="table_line">
              <a-input style="width: 60%" v-model="params_52.oil_pressure" />
            </li>
            <li class="table_line">
              <a-input style="width: 60%" v-model="params_52.oil_density" />
            </li>
          </ul>
        </div>
      </div>
      <div class="input_right">
        <div class="text_right">
          <ul class="table" style="line-height:50px;margin-right: 44px;">
            <li class="table_line">润滑粘度输入方式</li>
            <li class="table_line">
              <div v-show="isShowConent1">润滑油进油粘度(mm²/s)</div>
              <div v-show="isShowConent2">润滑油40°C润滑粘度(mm²/s)</div>
            </li>
            <li class="table_line">
              <div v-show="isShowConent2">润滑油100°C润滑粘度(mm²/s)</div>
            </li>
            <li class="table_line">进油温度(°C)</li>
          </ul>
        </div>
        <div class="text_right_input">
          <ul style="line-height:50px;">
            <li class="table_line">
              <el-select
                  v-model="item"
                  style="width: 60%"
                  placeholder="手动输入"
              >
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    @click.native="selectThing(item)"
                >
                </el-option>
              </el-select>
            </li>
            <li class="table_line">
              <a-input
                  style="width: 60%"
                  v-show="isShowConent1"
                  v-model="params_52.vis_work"
              />
              <a-input
                  style="width: 60%"
                  v-show="isShowConent2"
                  v-model="params_52.v40"
              ></a-input>
            </li>
            <li class="table_line">
              <div v-show="isShowConent2">
                <a-input style="width: 60%" v-model="params_52.v100" />
              </div>
            </li>
            <li class="table_line">
              <a-input style="width: 60%" v-model="params_52.oper_temp" />
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="cal">
      <a-button class="cal_button" v-on:click="cal">
        计算
      </a-button>
    </div>
    <div class="output">
      <div class="label_text">
        <label>
          输出参数
        </label>
      </div>
      <div class="output_text">单个喷孔流量(L/min)</div>
      <div class="output_text_data">
        <div style="margin-left: 10%">{{ data }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import {flowrate_of_nozzle} from "@/api/file";
export default {
  created() {
    document.title = '单个喷孔流量计算' //模块中文名
    this.$store.state.file.key = 52 //设置key为自己的页面编号
  },
  name: "flowrate_of_nozzle",
  data() {
    return {
      //这个地方直接把参数换成this.$store.state.file.dataList[]
      params_52:this.$store.state.file.dataList[52],
      //输入参数
        d: "1.2",
        L: "5",
        vis_work: "320",
        v100: "36",
        v40: "320",
        oper_temp: "50",
        oil_density: "850",
        oil_pressure: "0.3",
        pp:"1",
      isShowConent1: true,
      isShowConent2: false,
      data: "",
      options: [
        {
          value: "1",
          label: "手动输入"
        },
        {
          value: "2",
          label: "自动计算"
        }
      ],
      value: ""
    };
  },
  methods: {
    //下拉框事件
    selectThing(item) {
      if (item.value === "1") {
        //options中的value
        this.params_52.pp=item.value;
        this.isShowConent1 = true;
        this.isShowConent2 = false;
      } else if (item.value === "2") {
        this.params_52.pp=item.value;
        this.isShowConent1 = false;
        this.isShowConent2 = true;
      }
    },
    //计算
    cal: function() {
      flowrate_of_nozzle(this.params_52).then(res=>{
        this.data=res[0];
        console.log(res);
      })
    },

  },

}
</script>

<style scoped>
.fil {
  border-radius: 3px;
  border: rgba(231, 231, 231, 0.486) 1px solid;
  width: 100%;
  height: 6%;
  background: #d7d7d7;
}
.fil_text {
  color: black;
  font-size: 16px;
  padding-left: 30px;
  padding-top: 0.52%;
}
.label_text {
  background: #d7d7d7;
  padding-left: 80px;
  font-size: 18px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.input {
  margin-top: 30px;
  width: 95%;
  height: 40%;
  left: 2.5%;
  position: relative;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 5px;
  box-shadow: 2px 2px 3px #aaaaaa;
}
.cal {
  width: 100%;
  height: 10%;
}
.output {
  left: 2.5%;
  width: 95%;
  height: 16%;
  margin-top: 15px;
  position: relative;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 5px;
  box-shadow: 2px 2px 3px #aaaaaa;
}
.cal_button {
  width: 8%;
  height: 60%;
  float: right;
  top: 30%;
  right: 12%;
}
.input_left {
  width: 50%;
  height: 80%;
  position: absolute;
  left: 0;
}
.input_right {
  width: 50%;
  height: 80%;
  position: absolute;
  right: 0;
}
.table_line {
  margin-top: 3%;
}
.text_left {
  width: 50%;
  height: 100%;
  text-align: right;
  float: left;
  font-size: 1.2em;
}
.text_left_input {
  width: 50%;
  height: 100%;
  left: 60%;
  float: right;
}
.text_right {
  width: 50%;
  height: 100%;
  text-align: right;
  float: left;
  font-size: 1.2em;
}
.text_right_input {
  width: 50%;
  height: 100%;
  float: right;
}
.output_text {
  width: 45%;
  height: 100%;
  text-align: right;
  font-size: 1.2em;
  float: left;
}
.output_text_data {
  width: 55%;
  height: 100%;
  text-align: left;
  font-size: 1.2em;
  float: right;
}
.text_input {
  margin-left: 44px;
}
</style>